<template>
  <div @click='$refs.query.focus()'>
    <form class="search-box"
          action=""
          @submit.prevent="enter">
      <i class="icon-search"></i>
      <input ref="query"
             v-model="query"
             class="box"
             name='query'
             :placeholder="placeholder"
             @keyup.enter="$emit('submit',$event.target.value)" />
      <i @click.stop="clear"
         v-show="query"
         class="icon-dismiss"></i>
    </form>
  </div>
</template>

<script>
// 搜索组件
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  methods: {
    clear () {
      this.query = ''
    },
    setQuery (query) {
      this.query = query
    },
    enter (e) {
      // console.log(this.query)
    }
  },
  watch: {
    query (newQuery) {
      if (newQuery) {
        this.$emit('search', newQuery)
      } else {
        this.$emit('search', '')
      }
    }
  }
}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
.search-box
  display flex
  align-items center
  box-sizing border-box
  width 100%
  padding 0 6px
  height 40px
  background $color-highlight-background
  border-radius 6px
  .icon-search
    font-size 24px
    color $color-background
  .box
    flex 1
    margin 0 5px
    line-height 18px
    background $color-highlight-background
    color $color-text
    font-size $font-size-medium
    &::placeholder
      color $color-text-d
  .icon-dismiss
    font-size 16px
    color $color-background
</style>